<template>
  <div class="libaryWrapper">
    <div class="flex-line split">
      <!-- <el-tabs v-model="statusName" @tab-click="handleClick">
        <el-tab-pane label="全部" name=""></el-tab-pane>
        <el-tab-pane label="未开始" name="1"></el-tab-pane>
        <el-tab-pane label="直播中" name="2"></el-tab-pane>
        <el-tab-pane label="直播结束" name="3"></el-tab-pane>
      </el-tabs> -->
      <div class="flex-line  center">
        <el-input v-model="searchVal" class="mr-20" placeholder="请输入内容" clearable />
        <el-button class="gradientVertical" size="large" round @click="searchFun()">搜索</el-button>
      </div>
    </div>
    <!--list-->
    <!-- <el-row :gutter="20" v-loading="loading">
      <el-col :span="6" v-for="item in list" :key="item.id">
        <div class="mediaBox">
          <div class="media">
            <img :src="item.cover" />
            <span v-if="item.type === 'video'"><i class="el-icon-caret-right"></i></span>
          </div>
          <div class="detail">
            <h3>{{ item.title }}</h3>
            <p>{{ item.detail }}</p>
          </div>
          <footer>
            讲师：{{item.lecturer}}
          </footer>
        </div>
      </el-col>
    </el-row> -->
    <!-- <el-row :gutter="20" v-loading="loading"> -->
    <el-row v-if="list.length>0" v-loading="loading" :gutter="20" class="teachers-list">
      <el-col v-for="item in list" :key="item.id" :span="6" class="item">
        <div class="media">
          <img v-if="item.cover && item.cover!==&quot;&quot;" class="img-size w100 " :src="item.cover">
          <div v-else class="img-size w100 img-null">
            <i class="el-icon-picture-outline" />
          </div>
          <div v-if="item.liveStatus===1" class="aa zhihui">
            <img src="@/assets/wks.png">未开始
          </div>
          <div v-if="item.liveStatus===2" class="aa">
            <img src="@/assets/zb.png">直播中
          </div>
          <div v-if="item.liveStatus===3" class="aa zhihui">
            <img src="@/assets/yjs.png">已结束
          </div>
        </div>
        <p class="title ellipsis_one">{{ item.title }}</p>
        <p class="ellipsis_one">{{ item.content }}</p>
        <div class="flex-line  tip pt-5" style="font-size: 14px">
          <span><i class="el-icon-time pr-5" style="margin-right: 6px" />{{ item.beginAt }}开课时间</span>
          <span style="display: flex;margin-left: 25px"><img src="@/assets/baoming.png" style="margin-right: 6px">{{ item.visitorCount?item.visitorCount:0 }}人已报名</span>
        </div>
        <div class="flex-line split pt-10">
          <div class="flex-line center js">
            讲师：{{ item.lecturer }}
          </div>
          <div>
            <el-button v-if="item.liveStatus===2" class="gradientBtn" size="large" round @click="playFun(item)">进入直播</el-button>
            <el-button v-if="item.liveStatus===3" class="gradientBtn" size="large" round @click="playFun(item)">直播回放</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <!--/list-->
    <empty v-if="!loading && list.length<=0" />
    <Pagination :total="pagination.total" :page-num="pagination.pageNum" :page-size="pagination.pageSize" @paginationFun="paginationFun" />
    <add-dialog ref="addDialogRef" @addFun="addFun" />
  </div>
</template>

<script>
import {
  // playurlRequest,
  getDocList,
  docSubmit
} from './api'
import Pagination from '@/components/Basic/PaginationTwo'
import addDialog from './components/addDialog'
export default {
  components: {
    Pagination, addDialog
  },
  data () {
    return {
      statusName: '',
      loading: true,
      list: [],
      pagination: {
        total: 0,
        pageSize: 12,
        pageNum: 1
      },
      searchVal: '',
      addShow: false,
      playUrl: 'https://h5.youzan.com/wscvis/knowledge/index?kdt_id=99491309&page=livedetail&alias=2732lmah4stwttf&qr=paidcontent_2732lmah4stwttf&shopAutoEnter=1'
    }
  },
  created () {
    this.getData()
  },
  methods: {
    playFun (item) {
      window.open(item.liveDetailUrl)
      // const prams = {
      //   alias: alias
      // }
      // playurlRequest(prams).then(res => {
      //   window.open(res)
      // }).finally(() => {
      //   this.loading = false
      // })
    },
    // tab切换
    handleClick (tab, event) {
      this.pagination.pageNum = 1
      this.getData()
    },
    // 搜索
    searchFun () {
      this.pagination.pageNum = 1
      this.getData()
    },
    // 新增 编辑
    handleFun (type, index) {
      this.editObj = {}
      if (type === 'edit') {
        this.editObj = this.list[index]
        this.$refs.addDialogRef.mainEditFun(type, this.editObj)
      } else {
        const obj = {
          title: '',
          cover: '',
          beginAt: '',
          content: '',
          id: null
        }
        this.$refs.addDialogRef.mainEditFun(type, obj)
      }
    },
    routerInfo (id) {
      this.$router.push('/teacherResource/training/offline/detail')
    },
    //
    addFun (type, form) {
      if (type === 'submit') {
        // let time = form.beginAt.replace(, "/");
        const data = {
          ...form
        }
        // delete data.beginAt
        data.beginAt = form.beginAt.replace(/-/g, '/')
        docSubmit(data, 'post').then(() => {
          this.$message.success('添加成功')
          this.addShow = false
        })
      } else {
        this.addShow = false
      }
    },
    // 分页
    paginationFun (val) {
      this.pagination.pageNum = val
      this.getData()
    },
    getData () {
      this.loading = true
      const prams = {
        pageNum: this.pagination.pageNum - 1,
        pageSize: this.pagination.pageSize,
        keyword: this.searchVal
      }
      getDocList(prams).then(res => {
        this.loading = false
        this.pagination.total = res.total
        this.list = res.content
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang='scss'>
@import "../../scss/list.scss";
@import "../../scss/elementReset.scss";
.aa{
  position: absolute;
  padding: 6px 8px;
  background: linear-gradient( 90deg, #FFB21A 0%, #FF8000 100%);
  border-radius: 4px;
  top: 12px;
  left: 12px;

  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
  text-align: right;
  font-style: normal;
  text-transform: none;
  img{
    margin-right: 8px;
  }
}
.js{
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.zhihui{
  background: linear-gradient( 90deg, #BDBDBD 0%, #8A8A8A 100%) !important;
}
</style>
